<template>
  <a-modal
    v-model:visible="visible"
    :title="modalTitle"
    width="65%"
    @ok="visible = false"
    @cancel="visible = false"
  >
    <a-table
      :columns="columns"
      :data-source="state.data"
      :pagination="state.pagination"
      @change="pageChange"
      :loading="state.loading"
      rowKey="virtually_id"
    >
      <template #bodyCell="{ record, column }">
        <template v-if="column.dataIndex === 'status'">
          <a-tag v-if="record.status===0">失效</a-tag>
          <a-tag color="success" v-if="record.status===1">有效</a-tag>
          <a-tag color="warning" v-if="record.status===2">已使用</a-tag>
<!--          <a-switch-->
<!--            v-model:checked="record.status"-->
<!--            checked-children="开启"-->
<!--            un-checked-children="关闭"-->
<!--            :checkedValue="1"-->
<!--            :unCheckedValue="0"-->
<!--            @change="changeSwitch(record)"-->
<!--          />-->
        </template>
      </template>
    </a-table>
  </a-modal>
</template>
  <script setup>
import { reactive } from "vue";
import { getVirtuallyCard } from "@/api/goods/goods";
import useModal from "@/utils/useModal";

const { visible, modalTitle } = useModal();

const columns = [
  {
    title: "id",
    dataIndex: "virtually_id",
    width: 100,
  },
  {
    title: "卡号",
    dataIndex: "card_number",
    width: 100,
  },
  {
    title: "卡密",
    dataIndex: "card_pwd",
    width: 100,
  },
  {
    title: "创建时间",
    dataIndex: "create_time",
    width: 150,
  },
  {
    title: "状态",
    dataIndex: "status",
    width: 100,
  },
];

const state = reactive({
  id: null,
  data: [], //表格的数据
  loading: false,
  pagination: {
    total: 0,
    showSizeChanger: true, //是否页码可以改变
    current: 1, //当前xx页面
    pageSize: 10, //一页展示xx条数据
    showTotal: function (total) {
      return "总共" + total + "条数据";
    }, //总共xx条
    showQuickJumper: true,
  }, //分页数据
  searchParams: {
    page: 1,
    limit: 10,
  }, //搜索数据
});

const show = (model) => {
  modalTitle.value = "虚拟卡号";
  state.id = model.goods_id;
  visible.value = true;
  getList();
};
//获取列表的数据
const getList = () => {
  state.loading = true;
  getVirtuallyCard({
    id: state.id,
    ...state.searchParams,
  }).then((res) => {
    setTimeout(function () {
      state.loading = false;
    }, 500);
    if (res.code == 0) {
      state.loading = false;
      const data = res.data;
      state.data = data.data;
      state.pagination.total = data.total;
    }
  });
};
//分页变动数据
const pageChange = (pagination) => {
  state.pagination.current = pagination.current;
  state.pagination.pageSize = pagination.pageSize;
  //搜索的参数
  state.searchParams.page = pagination.current;
  state.searchParams.limit = pagination.pageSize;
  getList();
};

defineExpose({
  show,
});
</script>
  